<template>
  <div class="q-pa-md">
    step {{ step }} {{ typeof step }}

      <!-- v-model="step" -->
    <t-stepper
      style="opacity: 100%"
      class="fasr_stepper185741"
      color="rgb(25, 118, 210)"
      :tabIndex="0"
      :staticItems="staticItems"
    >

        <q-step v-for="(item, index) of staticItems" :name="item.name" :title="item.title">

        </q-step>
    </t-stepper>
    === <br />
    qqq

    <!-- <q-stepper
      header-nav
      v-model="step"
      style="opacity: 100%"
      class="fasr_stepper185741"
      color="rgb(25, 118, 210)"
      :tabIndex="0"
      :staticItems="staticItems"
    >
      <q-step name="1" title="普通容器">1111</q-step>
      <q-step name="2" title="普通容器">2222</q-step>
    </q-stepper> -->
    === <br />
    <!-- <tm-steps
      header-nav
      v-model="step"
      style="opacity: 100%"
      class="fasr_stepper185741"
      color="rgb(25, 118, 210)"
      :tabIndex="0"
      :staticItems="staticItems">
      <tm-step name="1" title="普通容器">11</tm-step>
      <tm-step name="2" title="普通容器">22</tm-step>
    </tm-steps> -->
  </div>
</template>

<script setup>
// import {
// QStep as TmStep,
// QStepper as TmSteps
// } from '@teld/q-components';
import { onMounted, ref } from 'vue';
// import TAvatar from '/components/basic/avatar';
// import TStep from '/components/basic/step';
// console.log('TStep.name;', TStep.name);
// console.log('TAvatar.name;', TAvatar.name);
const stepper = ref(null);
const step = ref(1);
const _OnError = () => {};
onMounted(() => {

});
const staticItems = ref([
  {
    name: 1,
    title: '步骤1',
    code: 'first',
  },
  {
    name: 2,
    title: '步骤2',
    code: 'first',
  },
])
const emitUpdate = e => {
  console.log('father, T modelValue - ', e)
  step.value = e
}
const handleQModleValue = e => {
  console.log('father, Q modelValue - ', e)
  step.value = e
}

</script>
